<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>FarmaSoft</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResources.jsp" %>
 <script type="text/javascript">
 $(document).ready(function(){
 	$("#dialogo").dialog({
		autoOpen: false,
        title: "Formulario Región",
		height: 250,
		width: 550,
		modal: true,
		buttons: {
        	"Aceptar": function() {
            	var flag = $("#formRegion").valid();
                if(flag){
                	$.ajax({
                    	type: 'POST',
                        url: 'generalAdministrationAddEditRegion',
                        data: $('#formRegion').serialize(),
                        success: function(res){
                        	//mostrarLista(res);
                        	location.href = "adminRegion?_menuId=2&_subMenuId=2&_optionId=2";
                        },
                        error:function(){alert("Error! al registrar la Región")}
                    });
                    $( this ).dialog( "close" );
                 }
              },
              Cancelar: function() {
              	$( this ).dialog( "close" );
              }
		},
		close: function() {}
	});
	//boton addPais
    $.fn.addRegion = function(){
    	$('#formRegion').each(function(){
        	this.reset();
        });
                    
        $("#idPaisSel option:selected").each(function (){
        	$("#idPais").val($(this).val());
            $("#nombrePais").val($(this).text());
        });
                    
        $("#titleForm").text("Nueva Region");
        $("#accion").val("0");
        $("#dialog:ui-dialog" ).dialog( "destroy" );
        $("#dialogo" ).dialog( "open" );
        $("#nombre").focus();
    }
               
    //function to change a country
    $.fn.editar = function(idRegion,idPais,nombre,sigla){
    	$("#titleForm").text("Modificar Region");
        $('#formRegion').each(function(){
        	this.reset();
        });
        
        $("#idPaisSel option:selected").each(function (){
        	$("#idPais").val($(this).val());
            $("#nombrePais").val($(this).text());
        });
                    
        $("#accion").val("1");
        $("#idRegion").val(idRegion);
        $("#idPais").val(idPais);// idPais permite mucho a q llame al editar con el nombre del pais
        $("#nombre").val(nombre);
        $("#sigla").val(sigla);
        $("#dialog:ui-dialog" ).dialog( "destroy" );
        $("#dialogo").dialog("open");
        $("#nombre").focus();
    }
    
	// buton Delete Region
   	$.fn.eliminar = function(idRegion,idCountry,name){
        idPais = 0;
        nombreCountry = "";
        $("#idPaisSel option:selected").each(function (){
            idRegion = $(this).val();
            nombreCountry = $(this).text();
        });
        
        if(confirm("¿Esta seguro de eliminar la ciudad ''"+name+"''? ")){
            $.ajax({
                url: "generalAdministrationRemoveRegion",
                type: "GET",
                data:{regionId:idRegion,countryId:idCountry,name:name},
                success:function(res){
                	mostrarLista(res);
                	//$('#listCiudades').html(res);
                },
                error: function(res){ alert("Error! al eliminar la Región."); }
            });
        }
    }
    
    // cambio de pais
    $("#idPais").change(function(){
    	$("#idPais option:selected").each(function (){
        	$("#idPais option:selected").each(function (){
            	idPais = $(this).val();
                nombre = $(this).text();
                $.ajax({
                	url: "generalAdministrationSelectCountry",
                    type: "GET",
                    data:{idCountry:idPais,name:nombre},
                 });
              });
          });
      });
  	//permit only text
	$('.lettersOnly').keyup(function () {
         if (this.value != this.value.replace(/[^A-Za-z\s]/g, '')) {
            this.value = this.value.replace(/[^A-Za-z\s]/g, '');
         }
     });
    
  });
            
  function mostrarLista(res){
  	location.href = "adminRegion?_menuId=2&_subMenuId=2&_optionId=2&idCountry="+res;
  }
            
  // muestra oculta
  function mostrarOcultar(){
  	if(document.getElementById("regionesBaja").style.display == 'none'){
    	document.getElementById("regionesBaja").style.display = 'block';
    }else{
        document.getElementById("regionesBaja").style.display = 'none';
    }
}
            
</script>
</head>

<body>
<div id="top-wrap">
	<%@include file="../../../head.jsp"  %>
	<div id="bodySpace">
		
	    <div class="clearfix" id="middle" style="position: absolute">  <!-- aqui va la ruta -->
	        <!-- aqui va el arbol de entrada -->
	        <div id="breadcrumb">
	            <ul>
                	<li><a href="mainFront?v=1">Home</a></li>
                    <li><span style="color:#666">Administraci&oacute;n</span></li>
                    <li><span style="color:#666">Administraci&oacute;n General</span></li>
                    <li class="current-page"><span class="end"><span class="middle">Administraci&oacute;n de Región</span></span></li>
                </ul>
	        </div>
	    </div>
	    
	    <div id="principal">
            <!-- izquierda -->
            <div class="cuerpo2y" style="border: 0px solid"><br/><br/><!-- estos break son necesarios ya q uso absolute en css  cuerpo izquierdo-->
                
                <div class="izq">
						<%@include file="../../../bodyIzq.jsp" %>
                </div>
                
                <div class="medio" style="border: 0px solid">
                   <center>
                   <h2 class="decorado">Lista de Regiones</h2></br></br> 
                   
                   <table class="miReporte" style="width: 80%">
	                   <tr>
	                        <!-- td style="text-align: right"><input type="button" class="boton" value="Anadir Nuevo Región" onclick="newUser()" title='Pulsa aqui para nuevo Región'/></td-->
	                        <td style="text-align: right"><input type="button" class="boton" value="Anadir Nueva Region" onclick="$.fn.addRegion()"/></td>
	                   </tr>
	               </table>
	               <table class="tabla_decorado" style="width: 60%">
	                   <thead>
	                         <tr>
	                              <th width="3%" class="th_decoradoRowspan">Nº</th>
	                              <th width="19%" class="th_decoradoRowspan">NOMBRE DEL PAIS</th>
	                              <th width="19%" class="th_decoradoRowspan">NOMBRE REGION</th>
	                              <th width="19%" class="th_decoradoRowspan">SIGLA</th>
	                              <th width="19%" class="th_decoradoRowspan">ACCION</th>
	                         </tr>
	                   </thead>
	                   <tbody>
                  	    	<c:set var="i" value="1"/>
							<c:forEach var="item" items="${regiones}">
						       <tr class="tr_decorado">
	                               <td class="th_decorado" style="text-align: center">${i}</td>
	                               <td class="th_decorado"> ${item.countryId.getName()}</td>
	                               <td class="th_decorado">${item.name}</td>	
	                               <td class="th_decorado">${item.initials}</td>
	                               <td class="td_decoradoDerecha" style="text-align: center">
	                               		<input type="button" value="Editar" onclick="$.fn.editar(${item.regionId},${item.countryId.getCountryId()},'${item.name}','${item.initials}')" class="botonRep" title="Pulsa aqui para editar la región"/>             
	                                    <input type="button" value="Eliminar" onClick="$.fn.eliminar('${item.regionId}','${item.countryId.getCountryId()}','${item.name}')" class="botonRep" title="Pulsa aqui para eliminar la región"/>
	                               </td>
	                            </tr>
	                            <c:set var="i" value="${i+1}"/>
					    	</c:forEach>
                     	</tbody>
	                 </table>
	                 
	                 <div id="dialogo"><br/>
                        <h2 class="decorado" id="titleForm"></h2><br/>
                        <form id="formRegion" method="POST">
                         	<input type="hidden" name="accion" id="accion" value="0" />
                            <input type="hidden" name="idRegion" id="idRegion" value="0" />
                     
							<div style="clear:both;">
                                <label class="form_align35">Pais : </label>
								<select name="idPais" id="idPais" class="required form_input_align" title="Seleccione un Pais">
		                            	<option value=""><fmt:message key="form.selected"/></option>  
		                                <c:forEach var="item" items="${countryListWithId}">
											<option value="${item.countryId}">${item.name}</option>    
										</c:forEach>                          
		                        </select>
		                        <label class="error">*</label>
                            </div>
                            <div style="clear:both;">
                                 <label class="form_align35" >Nombre : </label>
                                 <input type="text" name="nombre" id="nombre" value="" class="required form_input_align lettersOnly" title="Ingrese Nombre Region" maxlength="40" placeholder="letras"/>
                                 <label class="error">*</label>
                            </div>
                            <div style="clear:both;">
                                 <label class="form_align35" >Sigla : </label>
                                 <input type="text" name="sigla" id="sigla" value="" class="form_input_align lettersOnly" title="Ingrese Sigla Region" maxlength="5" placeholder="letras"/>
                                 
                            </div>
                         </form>
                       </div> <!-- FIN DIV id="dialogo" -->
	                 </center>                         
                </div>
            </div><!--end of leftPan-->
             <div class="yDer" style="border: 1px solid #ccc;">
                  <%@include file="../../../notices.jsp" %>                       
            </div><!--end of rightPan-->
        </div><!--end main content -->
	</div>
</div>
</body>
</html>
